<template>
  <div class="contentss">
    <div class="banners" v-if="bannerList.length">
      <el-carousel height="28vw" autoplay arrow="never">
        <el-carousel-item v-for="item in bannerList" :key="item">
          <img :src="item.img" style="width: 100%; height: 100%" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script>
import { getBanners, gettenant } from "@/apis/shopHome/home";
export default {
  name: "banner",
  props: {
    categoryId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      bannerList: [
        // { img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" },
        // { img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" },
        // { img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" },
        // { img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" }
      ]
    };
  },
  watch: {
    categoryId(val) {
      this.getBannersFun()
    }
  },
  created() { },
  mounted() {
    this.getBannersFun()
  },
  computed: {},
  methods: {
    getBannersFun() {
      getBanners(this.categoryId || 0)
        .then(res => {
          this.bannerList = res.data || [];
        })
        .catch(() => { });
    }
  }
};
</script>
<style lang="scss" scoped>
.contentss {
  margin-top: 64px;
}

.banners {
  padding: 0 20px;
  //box-shadow: 4px 5px 16px 0 rgba(4, 19, 74, 0.04);
  border-radius: 10px;
}

.el-carousel {
  border-radius: 5px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
